<template>
	<div class="obs">
		<h4>发表评论</h4>
		<hr />
		<textarea v-model="cont" placeholder="请输入评论(最多120个字)"></textarea>
		<input type="button" class="buttom" value="发表评论" @click="report"/>
		<div v-for="(item,i) in list" :key = 'i'>
			<p class="user_cont">
				<span>用户 : <span>{{item.user_name}}</span></span>
				<span>发表时间:<span>{{item.add_time | times('YYYY-MM-DD HH-mm-ss')}}</span></span>
			</p>
			<p class="user-penple">
				{{item.content}}
			</p>
		</div>
		<p style="text-align: center;" @click="next">加载更多</p>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default {
		data(){
			return {
				list:[],
				index:1,
				cont:'',
				
			}
		},
		created(){
			this.getpl();
		},
		methods: {
			getpl(){
				this.$http.get('api/getcomments/'+this.uId+'?pageindex='+this.index).then((resolve)=>{
					if(resolve.body.status == 0){
						this.list =	this.list.concat(resolve.body.message)
						console.log(this.list)
					}else{
						Toast('获取评论列表失败!')
					}
					
				},(reject)=>{
					Toast('网络错误!')
				})
				},
				next(){
					this.index++;
					this.getpl()
				},
				report(){
					
					if(this.cont.trim() == ''){
					   return Toast('请输入内容！')
					}
					this.$http.post('api/postcomment/'+this.uId,{
						content:this.cont.trim()
					}).then((resolve)=>{
						if(resolve.body.status == 0){
							Toast('评论成功!')
							var pin = {
								user_name:'匿名',
								add_time:new Date(),
								content:this.cont
							}
							this.list.unshift(pin);
							this.cont = ''
							// console.log(this.list)
						}else{
							Toast('获取评论失败!')
						}
						
					},(reject)=>{
						Toast('网络错误!')
					})
				}
		},
		props:['uId']
	}
</script>

<style scoped lang="less">
	.obs{
		margin-bottom:4em;
		textarea{
			width: 100%;
			height: 5em;
			font-size:1em;
		};
			
		.buttom{
			width:100%;
			height:3em;
			background:blue;
			color:#fff;
			padding: 0 10px;
		};
	}
	.user_cont{
		width:100%;
		height:2em;
		background:#999999;
		color:#fff;
		line-height:2em;
		display: flex;
		justify-content: space-between;
		margin:10px 0;
		padding: 0 10px;
	}
	.user-penple{
		color:#000;
		padding:0 5px;
	}
	
</style>
